<template>
	<view class="">
		<!-- <view class="main-wrap" :class="{ show: loaded }"> -->
			<u-tabs
				:list="topDataList"
				name="name"
				:active-item-style="activeStyle"
				font-size="26"
				inactive-color="#666666"
				bar-width="40"
				:is-scroll="true"
				:current="tabCurrentIndex"
				@change="change"
			></u-tabs>
			<view class="main-con row">
				<scroll-view class="left-scroll-con" :scroll-top="scrollLeftTop" scroll-y>
					<view class="row nav-left-item" v-for="(v, k) in dataList" :key="k" :class="{ on: showCategoryIndex == k }" @tap="showCategory(v.id, k)">
						<view class="text">{{ v.name }}</view>
					</view>
				</scroll-view>
				<scroll-view class="right-scroll-con" scroll-y :scroll-top="scrollTop" @scroll="scrollRightCon">
					<view class="right-con" v-for="(item, index) in dataList" :key="index">
						<view class="right-title" :class="{ fixed: showCategoryIndex == index }">{{ item.name }}</view>
						<view class="right-title" style="height: 40px;" v-if="showCategoryIndex == index"></view>
						<view class="cart-con" v-if="item.goodsList.length != 0">
							<view class="cart-item-con row" v-for="(v, k) in item.goodsList" :key="k">
								<view class="cart-item-img"><image :src="v.icon" mode="aspectFill" class="img"></image></view>
								<view class="cart-item-right" style="width: 68%;">
									<view class="clamp cart-item-title">{{ v.name }}</view>
									<view class="row between" style="margin-top: 20rpx;">
										<view class="cart-item-price">{{ v.price }}</view>
										<mix-number-box v-model="v.count" :parentindex="index" :index="k" :parentId="v.id" @change="changeItemNum"></mix-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bottom-con row between b-t">
				<view class="row" @tap="onClickBottomLeft">
					<view style="position: relative;margin-right: 30rpx;">
						<image src="/static/img/gouwuche.png" mode="" class="left-i"></image>
						<view class="left-num clamp">{{ totalnum }}</view>
					</view>
					<view class="cart-item-price" v-if="totalprice != 0">{{ totalprice }}</view>
				</view>

				<view class="right-btn" hover-class="hover-opacity" @tap="userSubCreatOrder">立即下单</view>
			</view>
		<!-- </view> -->

		<mix-cart ref="mixCart"></mix-cart>
		<mix-modal ref="mixModal" title="抱歉" text="你还没有绑定团长,请先绑定团长!"></mix-modal>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>
<script>
import mixNumberBox from '@/components/mix-number-box/index.vue';
import mixCart from '@/components/mix-cart/index.vue';
export default {
	components: {
		mixCart,
		mixNumberBox
	},
	data() {
		return {
			activeStyle: {
				color: '#000000'
			},
			showCategoryIndex: 0,
			tabCurrentIndex: 4,
			scrollTop: 0,
			scrollLeftTop: 0,
			arr: [], //初始值，后边计算会根据手机适配覆盖
			leftItemHeight: 40, //49行会计算出新值进行覆盖
			navLeftHeight: 0, //左边scroll-view 内层nav的总高度
			diff: 0, //左边scroll-view 内层nav的总高度与视口之差
			topDataList: [],
			dataList: [],
			categoryid: '',
			totalprice: 0,
			totalnum: 0,
			timeoutId: null
		};
	},
	onLoad(options) {
		this.categoryid = options.id;
		this.topDataList = getApp().globalData.categoryList;
		this.tabCurrentIndex = options.index - 1;
		this.$nextTick(async ()=>{
			await this.$refs.mixCart.getCartData();
			this.loadData();
		})
		uni.$on('change', ({ totalprice, totalnum }) => {
			this.totalprice = totalprice;
			this.totalnum = totalnum;
		});
	},
	methods: {
		getHeight() {
			let selectorQuery = uni.createSelectorQuery();
			selectorQuery.selectAll('.nav-left-item').boundingClientRect(rects => {
				this.leftItemHeight = rects[0].height;
				this.navLeftHeight = this.leftItemHeight * this.dataList.length;
				this.diff = this.navLeftHeight - uni.getSystemInfoSync().windowHeight + 120;
			});
			selectorQuery
				.selectAll('.right-con')
				.boundingClientRect(rects => {
					let arr = [0];
					let top = 0;
					rects.forEach(rect => {
						top = rect.bottom - 50;
						arr.push(top);
					});
					this.arr = arr;
				})
				.exec();
		},
		scrollRightCon(e) {
			if (this.timeoutId) {
				clearTimeout(this.timeoutId);
			}
			let scrollHeight = e.detail.scrollTop + 10;
			this.timeoutId = setTimeout(() => {
				//节流
				for (let i = 0; i < this.arr.length; i++) {
					let height1 = this.arr[i];
					let height2 = this.arr[i + 1];
					if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
						this.showCategoryIndex = i;
						this.diff > 0 && (this.scrollLeftTop = Math.round((this.showCategoryIndex * this.diff) / (this.dataList.length - 1)));
						return false;
					}
				}
				this.showCategoryIndex = 0;
				this.timeoutId = null;
			}, 10);
		},
		onClickBottomLeft() {
			this.$refs.mixCart.open();
		},
		userSubCreatOrder() {
			this.$refs.mixCart.canCreatOrder();
		},
		change(index) {
			this.tabCurrentIndex = index;
			this.categoryid = this.topDataList[index];
			this.showCategoryIndex = 0;
			this.scrollTop == this.arr[0] ? (this.scrollTop = this.scrollTop + 1) : (this.scrollTop = this.arr[0]);
			this.scrollLeftTop = 0;
			this.loadData();
		},
		showCategory(id, index) {
			this.categoryActive = index;
			this.scrollTop == this.arr[index] ? (this.scrollTop = this.scrollTop + 1) : (this.scrollTop = this.arr[index]);
		},
		changeItemNum(e) {
			console.log(e);
			let index = e.index;
			let parentindex = e.parentindex;
			let item = this.dataList[parentindex];
			item.goodsList[index].count = e.number;
			console.log(this.dataList)
			this.$refs.mixCart.getCartData();
		},
		pullDown(pullScroll) {
			setTimeout(() => {
				this.loadData(pullScroll);
			}, 200);
		},
		getCartItemforList(array, item) {
			let count=0;
			let finditm = array.find(el => {return el.id == item.id});
			if (finditm) {
				count= finditm.count;
			}
			return count
		},
		async loadData() {
			const cartArray=this.$refs.mixCart.dataList;
				const res = await this.$request('goods/all-list', { categoryid: this.categoryid }, { showLoading: true });
				if (res.result == 0) {
					if (cartArray.length != 0) {
						res.dataList.forEach(parentItem => {
							parentItem.goodsList.forEach(item => {
								item.count=this.getCartItemforList(cartArray,item)
							});
						});
					}
					this.dataList = res.dataList;
					setTimeout(() => {
						this.getHeight();
					}, 30);
				} else {
					this.$util.msg(res.resultNote);
				}
		}
	}
};
</script>

<style scoped lang="scss">
.fixed {
	position: fixed;
	top: 50px;
	background: #f6f6f6;
	width: calc(100% - 180upx);
	z-index: 9999;
	padding: 0 20upx;
}
.on {
	background: #2781a7;
	color: #ffffff;
}
.text {
	line-height: 80rpx;
	text-align: center;
	width: 100%;
}
.main-con {
	position: fixed;
	top: 50px;
	bottom: 60px;
	background: #f6f6f6;
	width: 100%;
}
.left-scroll-con {
	width: 180rpx;
	height: 100%;
	background: #f6f6f6;
}
.right-scroll-con {
	flex: 1;
	height: 100%;
}
.bottom-con {
	height: 60px;
	padding: 0 20upx;
	width: 100%;
	position: fixed;
	bottom: 0;
}
.left-i {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
}
.left-num {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	background: #cb1414;
	color: #ffffff;
	font-size: 22rpx;
	border-radius: 50%;
	width: 30rpx;
	height: 30rpx;
	line-height: 30rpx;
	text-align: center;
}
.right-btn {
	border-radius: 33rpx;
	width: 220rpx;
	height: 66rpx;
	text-align: center;
	line-height: 66rpx;
	color: #ffffff;
	font-size: 26rpx;
	background: #2781a7;
}
.right-con:last-child {
	min-height: 100%;
}
.right-title {
	height: 40px;
	line-height: 40px;
	padding: 0 20upx;
	background: #ffffff;
}

/* 购物车 部分 */

.cart-con {
	background: #ffffff;
	padding: 20upx 0;
}
.cart-item-con {
	margin-bottom: 20upx;
	padding: 0 20upx;
}
.cart-item-con:last-child{
	margin-bottom: 0;
}
.cart-item-img {
	width: 144upx;
	height: 144upx;
	border-radius: 10upx;
	overflow: hidden;
	margin-right: 20upx;
	position: relative;
}
.img {
	width: 144upx;
	height: 144upx;
}
.s-con {
	width: 144upx;
	height: 144upx;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 10upx;
	position: absolute;
	top: 0;
	left: 0;
}
.cart-item-right {
	position: relative;
}
.cart-item-title {
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
}
.cart-item-price {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #cb1414;
	line-height: 56upx;
}
.cart-item-price::before {
	content: '￥';
	font-size: 20rpx;
	color: #cb1414;
}
</style>
